<template>
  <div class="main_right column-flex">
    <div class="module_top">
      <!-- 标题 -->
      <div class="module-content flex">
        <div class="main-list">
          <img
            class="main-img"
            src="@/assets/images/maintainSecrecy/youxiu.png"
            alt=""
          />
          <p>分保合规程度</p>
        </div>
        <div class="line-icon">
          <img
            src="@/assets/images/maintainSecrecy/bmjgts_line.png"
            v-for="item in 4"
            alt=""
          />
        </div>
        <div class="specific-wk flex">
          <div
            class="specific-list"
            v-for="(item, i) in secrecyObj"
            :key="i"
            @click="changeArr(i)"
          >
            <div class="specific-list-img">
              <template v-if="item.status == 'normal'">
                <img
                  class="specific-bg"
                  src="@/assets/images/maintainSecrecy/bmjgts_08.png"
                  alt=""
                />
                <img
                  class="specific-icon"
                  :src="require('@/assets/images/maintainSecrecy/' + item.img)"
                  alt=""
                />
              </template>
              <template v-if="item.status == 'warning'">
                <img
                  class="specific-bg"
                  src="@/assets/images/maintainSecrecy/bmjgts_05.png"
                  alt=""
                />
                <p class="specific-count">{{ item.value }}</p>
              </template>
            </div>
            <p class="specific-title">{{ item.title }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="box module_bottom">
      <div class="module-content">
        <div class="main-img">
          <img src="@/assets/images/maintainSecrecy/bg.png" alt="" />
        </div>
        <div class="data-list" v-for="(item, i) in dataObj" :key="i">
          <div :class="['data-count', currentIndex == i ? 'active' : '']">
            <img
              class="data-img"
              v-show="item.status == 'normal'"
              src="@/assets/images/maintainSecrecy/bmjgts_06.png"
              alt=""
            />
            <img
              class="data-img"
              v-show="item.status == 'warning'"
              src="@/assets/images/maintainSecrecy/bmjgts_07.png"
              alt=""
            />
            <p
              :class="[
                'data-count-num',
                item.status == 'normal' ? 'font-blue' : 'font-red',
              ]"
            >
              {{ item.value }}<span>条</span>
            </p>
            <p class="data-count-title">{{ item.title }}</p>
          </div>
          <div class="data-line">
            <img src="@/assets/images/maintainSecrecy/line.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SecrecyLeft",
  data() {
    return {
      currentIndex: 0,
      secrecyObj: [
        {
          title: "基本需求保护",
          img: "",
          status: "normal",
        },
        {
          title: "安全信息保密",
          img: "",
          status: "warning",
          value: 6,
        },
        {
          title: "物理安全",
          img: "",
          status: "normal",
        },
        {
          title: "运行安全",
          img: "",
          status: "warning",
          value: 15,
        },
        {
          title: "其他",
          img: "",
          status: "normal",
        },
      ],
      dataObj: [
        {
          title: "配置合成",
          value: "112",
          status: "normal",
        },
        {
          title: "网络安全",
          value: "136",
          status: "normal",
        },
        {
          title: "异常行为",
          value: "46",
          status: "normal",
        },
        {
          title: "数据安全",
          value: "78",
          status: "normal",
        },
        {
          title: "运维监控",
          value: "278",
          status: "normal",
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.setMove();
    });
  },
  methods: {
    setMove() {
      let _self = this;
      setInterval(function () {
        if (_self.currentIndex < _self.dataObj.length - 1) {
          _self.currentIndex++;
        } else {
          _self.currentIndex = 0;
        }
      }, 1000);
    },
    changeArr(i) {
       if (i == 0) {
        this.dataObj =  [
        {
          title: "配置合成",
          value: "112",
          status: "normal",
        },
        {
          title: "网络安全",
          value: "136",
          status: "normal",
        },
        {
          title: "异常行为",
          value: "46",
          status: "normal",
        },
        {
          title: "数据安全",
          value: "78",
          status: "normal",
        },
        {
          title: "运维监控",
          value: "278",
          status: "normal",
        },
      ]
      }
    else  if (i == 1) {
        this.dataObj = [
          {
            title: "配置合成",
            value: "134",
            status: "normal",
          },
          {
            title: "网络安全",
            value: "256",
            status: "normal",
          },
          {
            title: "异常行为",
            value: "2",
            status: "warning",
          },
          {
            title: "数据安全",
            value: "4",
            status: "warning",
          },
          {
            title: "运维监控",
            value: "200",
            status: "normal",
          },
        ];
      } else if (i == 2) {
        this.dataObj = [
          {
            title: "配置合成",
            value: "169",
            status: "normal",
          },
          {
            title: "网络安全",
            value: "210",
            status: "normal",
          },
          {
            title: "异常行为",
            value: "30",
            status: "normal",
          },
          {
            title: "数据安全",
            value: "40",
            status: "normal",
          },
          {
            title: "运维监控",
            value: "178",
            status: "normal",
          },
        ];
      } else if (i == 3) {
        this.dataObj = [
          {
            title: "配置合成",
            value: "100",
            status: "normal",
          },
          {
            title: "网络安全",
            value: "9",
            status: "warning",
          },
          {
            title: "异常行为",
            value: "6",
            status: "warning",
          },
          {
            title: "数据安全",
            value: "40",
            status: "normal",
          },
          {
            title: "运维监控",
            value: "32",
            status: "normal",
          },
        ];
      } else if (i == 3) {
        this.dataObj = [
          {
            title: "配置合成",
            value: "169",
            status: "normal",
          },
          {
            title: "网络安全",
            value: "210",
            status: "normal",
          },
          {
            title: "异常行为",
            value: "30",
            status: "normal",
          },
          {
            title: "数据安全",
            value: "40",
            status: "normal",
          },
          {
            title: "运维监控",
            value: "178",
            status: "normal",
          },
        ];
      }
      else if (i == 4) {
        this.dataObj = [
          {
            title: "配置合成",
            value: "129",
            status: "normal",
          },
          {
            title: "网络安全",
            value: "21",
            status: "normal",
          },
          {
            title: "异常行为",
            value: "67",
            status: "normal",
          },
          {
            title: "数据安全",
            value: "89",
            status: "normal",
          },
          {
            title: "运维监控",
            value: "118",
            status: "normal",
          },
        ];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.main_right {
  width: 74%;

  .module_top {
    height: 40%;

    .module-content {
      height: 98%;
      padding: 1% 0;
      justify-content: space-between;

      .main-list {
        width: 20%;
        height: 100%;
        background: url("~@/assets/images/maintainSecrecy/bmjgts_01.png")
          no-repeat center;

        .main-img {
          margin-top: 16%;
          animation: moveit 1.5s infinite;
        }

        p {
          margin-top: 34%;
          font-size: 1.2rem;
        }
      }

      .line-icon {
        width: 5%;

        img {
          width: 100%;
        }
      }

      .specific-wk {
        width: 70%;
        margin-top: 2.2rem;

        .specific-list {
          width: 20%;
          position: relative;
          cursor: pointer;

          &::after {
            position: absolute;
            display: inline-block;
            content: "";
            width: 6rem;
            height: 0.4rem;
            background: url("~@/assets/images/maintainSecrecy/bmjgts_line.png")
              no-repeat 0 0;
            background-size: 100%;
            top: 2.6rem;
            right: -3rem;
          }

          &:nth-of-type(5) {
            &::after {
              background: transparent !important;
            }
          }

          .specific-list-img {
            margin: 0 auto;
            position: relative;

            .specific-bg {
              width: 90%;
            }

            .specific-count {
              position: absolute;
              left: 48%;
              top: 10%;
              transform: translate(-50%);
              font-size: 2.6rem;
              font-weight: bold;
              color: #ff281f;
            }

            .specific-icon {
              position: absolute;
              left: 50%;
              top: 12%;
              width: 3.4rem;
              transform: translate(-50%);
            }
          }

          .specific-title {
            font-size: 1.2rem;
            margin-top: -2rem;
          }
        }
      }
    }
  }

  .module_bottom {
    height: 58%;

    .module-content {
      width: 100%;
      height: 100%;
      position: relative;
      .main-img {
        width: 100%;
        margin: 0 auto;

        img {
          width: 50%;
        }
      }
      .data-list {
        position: absolute;
        width: 20rem;
        display: flex;
        .data-count {
          &.active {
            animation: moveit1 1.5s infinite;
          }
          position: absolute;
          .data-count-num {
            position: absolute;
            display: flex;
            align-items: baseline;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2.1rem;
            span {
              margin-left: 0.2rem;
              font-size: 1rem;
            }
          }
          .data-count-title {
            margin-top: 1rem;
          }
        }
        .data-line {
          position: absolute;
        }
        // 配置合成
        &:nth-of-type(2) {
          left: 29rem;
          top: 3rem;
          .data-line {
            right: 0;
            top: 5rem;
            transform: rotateY(180deg);
          }
        }
        //  网络安全
        &:nth-of-type(3) {
          left: 21rem;
          top: 18.4rem;
          .data-count {
            top: 0;
            left: 0;
          }
          .data-line {
            right: 0;
            top: 4rem;
            transform: rotateY(180deg);
          }
        }
        // 异常行为
        &:nth-of-type(4) {
          top: 1rem;
          right: 35rem;
          .data-count {
            right: 1rem;
          }
          .data-line {
            left: 0;
            top: 4rem;
          }
        }
        // 数据安全
        &:nth-of-type(5) {
          top: 10rem;
          right: 24rem;
          .data-count {
            right: 0;
          }
          .data-line {
            left: 0;
            top: 5rem;
          }
        }
        // 运维监控
        &:nth-of-type(6) {
          top: 26rem;
          right: 22rem;
          .data-count {
            right: 0;
          }
          .data-line {
            left: 0;
            top: 0rem;
            transform: rotateX(180deg);
          }
        }
      }
    }
  }
}
.font-blue {
  color: #00f5f1;
}
.font-red {
  color: #ff281f;
}

@keyframes moveit {
  0% {
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
  }
}
@keyframes moveit1 {
  0% {
  }
  50% {
    transform: translateY(-20px) scale(1.2);
  }
  100% {
  }
}
@keyframes round {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
